<!DOCTYPE html>
<!-- saved from url=(0067)https://websocket.kleshuo.com/Views/KP/#/main/main_ordinary_invoice -->
<html>
	{include file="public/head"}
	<body class="" style="">
		<style type="text/css" media="all">
			.threebox .smbox {
				color: #fff;
				background: #165692;
				padding: 5px 10px;
				border-radius: 3px;
				margin: 0 7px;
			}

			input {
				outline: none;
			}

			.ord-con-new {
				background: #f1f1f1;
			}

			.navlist {
				display: flex;
				margin-top: 50px;
				border-bottom: 1px solid #ccc;
				padding: 0 20px;
			}

			.navlist .nav {
				padding: 0 15px;
				height: 30px;
				line-height: 30px;
				color: #999;
				margin-bottom: -1px;
                cursor: pointer;
			}

			.nav.active {
				border: 1px solid #ccc;
				border-bottom: 3px solid #f1f1f1;
				color: #165692;
			}

			.msgbox {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 30px;
			}

			.msgli {
				display: flex;
				margin-bottom: 20px;
			}

			.msgli .left {
				margin-right: 10px;
				width: 105px;
				color: #999;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}

			.msgli input {
				border: 1px solid #ccc;
				padding: 5px;
			}

			.msgli .left span {
				color: red;
				margin-right: 5px;
			}

			.msgli .right {
				width: 380px;
				display: flex;
			}
			.msgli select{
			    width: 78%;
			    padding: 5px;
			    border: 0;
			}
            .msgli .right button{
                background: #165692;
                color: #fff;
                margin-right: 10px;
                padding: 5px 8px;
                border: 0;
                outline: 0;
                font-size: 14px;
            }
			.msgli .right .bank {
				border: 1px solid #ccc;
				padding: 5px;
				width: 100%;
				display: flex;
				align-content: center;

			}

			.msgli .right .bank input {
				width: 40%;
				margin-right: 10px;

			}

			.msgli .right .bank .add {
				width: 24px;
				height: 24px;
				border: 1px solid #ccc;
				text-align: center;
				background: #fff;
				line-height: 24px;
			}

			.msg_btn {
				width: 20%;
				margin-left: 2%;
				background: #165692;
				color: #fff;
				line-height: 24px;
				text-align: center;
			}

			.outbox {
				display: none;
			}

			.outbg {
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 600px;
				z-index: 1000;
				background: #fff;
				box-shadow: 0 0 10px #ccc;
			}

			.out-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px;
				box-sizing: border-box;
				background: #1D5B96;
				color: #fff;
				font-size: 17px;
			}

			.out-title img {
				width: 20px;
			}

			.out-body {
				display: flex;
				justify-content: center;
				padding: 20px 5%;
				flex-direction: column;
				background: #F3F3F3;
			}
            .inline-title{
                font-size: 16px;
                margin-bottom: 8px;
            }
            .inline-info{
                padding-left: 6%;
                font-size: 14px;
            }
            .inline-info .inline-li{
                margin-bottom: 8px;
                display: flex;
            }
            .inline-li p{
                flex: 1;
            }

			.out-btn {
				display: flex;
				justify-content: center;
				padding: 10px;
				border-top: 1px solid #ccc;
				background: #F3F3F3;
			}

			.out-btn button {
				background: #1d5b96;
				color: #fff;
				margin: 0 10px;
				outline: 0;
				border: 0;
				padding: 7px 20px;
			}
			.hidebox{
			    display: none;
			}
			#box1{
			    display: flex;
			}
			.right label{
			    display: flex;
			    font-weight: normal;
			}
			.right p{
			    margin-left: 5px;
			}
			.box2_title,.box2_title_input{
			    width: 80%;
			}
			.box2_title span{
			    color: #1d5b96;
			    border-bottom: 1px solid #1d5b96;
			}
			.box2_title_input{
			    display: flex;
			    align-items: center;
			    margin-top: 10px;
			}
			.box2_title_input input{
			    margin-right: 5px;
			    height: 15px;
			    width: 15px;
			}
			.otherbox{
			    width: 80%;
			    margin-top: 30px;
			}
			.otherbox .other_title{
			    font-weight: bold;
			    margin-bottom: 10px;
			}
			.other_list{
			    display: flex;
			    flex-wrap: wrap;
			}
            .other_item{
                width: 33.333%;
                padding: 0 5% 0 0;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                margin-bottom: 10px;
            }
            .other_item label{
                font-weight: normal;
                color: #333;
                display: flex;
                align-items: center;
            }
            .other_item input[type="checkbox"]{
                margin-right: 5px;
                width: 15px;
                height: 15px;
                
            }
            .other_item input[type='text']{
                width: 50px;
                background: #fff;
                padding:2px 5px;
                border: 0;
                outline: 0;
                text-align: center;
                color: #ccc;
                margin: 0 3px;
            }
		</style>
		<div id="app">
			<div class="ord-con-new">
				<div class="ord-div1-top"><img
						src="">
					<span>参数设置</span>
					<div class="ord-div2-right"><a href="javascript:history.go(-1);"><i
								class="iconfont icon-back"></i></a>
					</div>
				</div>
				<div class="navlist">
					<div class="nav active" data-id="box1">
						基本信息
					</div>
					<div class="nav" data-id="box2">
						运行参数
					</div>
					<div class="nav" data-id="box3">
						网络配置
					</div>
				</div>
				<div class="msgbox hidebox" id="box1">
					<div class="msgli">
						<div class="left">
							纳税人识别号：
						</div>
						<div class="right">
							91440300305875529Q
						</div>
					</div>
					<div class="msgli">
						<div class="left">
							纳税人名称：
						</div>
						<div class="right">
							华屹（深圳）网络科技服务有限公司
						</div>
					</div>
					<div class="msgli">
						<div class="left">
							<span>*</span>营业地址：
						</div>
						<div class="right">
							<input style="width:78%" type="text" placeholder="深圳市龙岗区坂田街道象角塘社区坂田汇智谷创新产业园1栋四层401-405号" />
							<div class="msg_btn" id="msg_btn">
								在线获取
							</div>
						</div>
					</div>
					<div class="msgli">
						<div class="left">
							<span>*</span>电话号码：
						</div>
						<div class="right">
							<input style="width:78%" type="text" placeholder="0755-27802339" />
						</div>
					</div>
					<div class="msgli">
						<div class="left">
							银行账号：
						</div>
						<div class="right">
							<div class="bank">
								<input type="text" name="" id="" value="平安银行深圳坂田支行" />
								<input type="text" name="" id="" value="15977969180098" />
								<div class="add">
									+
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="msgbox hidebox" id="box2">
				    <div class="box2_title">
				        记住设备口令 <span>取消记住设备口令</span>
				    </div>
				    <div class="box2_title_input">
				        <input type="checkbox" />税务UKey
				    </div>
				    <div class="otherbox">
				        <div class="other_title">
				            其他参数
				        </div>
				        <div class="other_list">
				            <div class="other_item">
				                <label>
				                    <input type="checkbox" />距离开票截止日期<input type="text" value="5" disabled />天提醒
				                </label>
				            </div>
				            <div class="other_item">
				                <label>
				                    <input type="checkbox" />剩余发票<input type="text" value="5" disabled />张提醒
				                </label>
				            </div>
				            <div class="other_item">
				                <label>
				                    <input type="checkbox" checked />打印发票时显示打印预览
				                </label>
				            </div>
				            <div class="other_item">
				                <label>
				                    <input type="checkbox"   />打开旧税号数据导出
				                </label>
				            </div>
				            <div class="other_item">
				                <label>
				                    <input type="checkbox" checked />增值税发票清单全打模式
				                </label>
				            </div>
				            <div class="other_item">
				                <label>
				                    <input type="checkbox" checked />开票软件主窗口关闭时提醒
				                </label>
				            </div>
				            <div class="other_item">
				                <label>
				                    <input type="checkbox" checked />委托代办退税企业
				                </label>
				            </div>
				            <div class="other_item">
				                <label>
				                    <input type="checkbox"  />是否提醒税率发生变化
				                </label>
				            </div>
				            <div class="other_item">
				                <label>
				                    <input type="checkbox"  />空闲<input type="text" value="60" disabled />分钟后关闭软件
				                </label>
				            </div>
				            <div class="other_item">
				                <label>
				                    <input type="checkbox"  />建安企业
				                </label>
				            </div>
				            <div class="other_item">
				                <label>
				                    <input type="checkbox"  />房地产企业
				                </label>
				            </div>
				        </div>
				    </div>
				</div>
				<div class="msgbox hidebox" id="box3">
					<div class="msgli">
						<div class="left">
							服务器认证模式:
						</div>
						<div class="right">
							双向SSL认证
						</div>
					</div>
					<div class="msgli">
						<div class="left">
							服务器地址：
						</div>
						<div class="right">
							<input style="width:78%" type="text" placeholder="fp.shenzhen.chinatax.gov.cn" />
						</div>
					</div>
					<div class="msgli">
						<div class="left">
						    服务器端口:
						</div>
						<div class="right">
							<input style="width:78%" type="text" placeholder="8387" />
						</div>
					</div>
					<div class="msgli">
						<div class="left">
						    汇总上传地址:
						</div>
						<div class="right">
							<input style="width:78%" type="text" placeholder="/acceptFramework/UniAcceptService" />
						</div>
					</div>
					<div class="msgli">
						<div class="left">
						    
						</div>
						<div class="right">
    						<label>
    						    <input type="checkbox" />
    						    <p>为上报汇总服务器设置代理服务器</p>
    						</label>
						</div>
					</div>
					
    				<div class="msgli">
						<div class="left">
						    代理方式:
						</div>
						<div class="right">
							<select name="" id="">
							    <option>http</option>
							    <option>sock4</option>
							    <option>sock5</option>
							</select>
						</div>
					</div>
					<div class="msgli">
						<div class="left">
						    服务器地址:
						</div>
						<div class="right">
							<input style="width:78%" type="text" placeholder="地址(xxx.xxx.xoxx.xxxxxxxx.(com/cn))" />
						</div>
					</div>
					<div class="msgli">
						<div class="left">
						    服务器端口:
						</div>
						<div class="right">
							<input style="width:78%" type="text" placeholder="端口(xxxx)" />
						</div>
					</div>
					<div class="msgli">
						<div class="left">
						    用户名:
						</div>
						<div class="right">
							<input style="width:78%" type="text" placeholder="" />
						</div>
					</div>
					<div class="msgli">
						<div class="left">
						    密码:
						</div>
						<div class="right">
							<input style="width:78%" type="text" placeholder="" />
						</div>
					</div>
					<div class="msgli">
    					<div class="left">
    					    
    					</div>
    					<div class="right">
    						<button type="submit">手工上传发票明细</button>
    						<button type="submit">测试连接</button>
    					</div>
    				</div>
					
					
				</div>
				<div class="main-bot"><button type="button" class="el-button el-button--default ">
						<!---->
						<!----><span>确 认</span>
					</button> <button type="button" class="el-button el-button--default ">
						<!---->
						<!----><span>取 消</span>
					</button></div>

			</div>
			<div class="outbox">
				<div class="outbg">
					<div class="out-title">
						<span>销售方信息</span>
						<img src="__STATIC__/tax/images/close-window.svg" id="close-box" class="outcancle" alt="" />
					</div>
					<div class="out-body">
                        <div class="inline-title">
                            在线信息
                        </div>
                        <div class="inline-info">
                            <div class="inline-li">
                                营业地址: <p>深圳市龙岗区坂田街道象角塘社区坂田汇智谷创新产业园1栋四层401-405号</p>
                            </div>
                            <div class="inline-li">
                                电话号码: 0755-27802339
                            </div>
                            <div class="inline-li">
                                银行名称: 平安银行深圳坂田支行
                            </div>
                            <div class="inline-li">
                                银行账号: 1597 79691800 98
                            </div>
                        </div>
                        <div class="inline-title">
                            比对结果:
                        </div>
                        <div class="inline-info">
                            <div class="inline-li">
                                没有更新项!
                            </div>
                        </div>
					</div>
					<div class="out-btn">
						<button id="infosure">确认</button>
						<button class="outcancle">取消</button>
					</div>
				</div>
			</div>
		</div>
		{include file="public/foot"}
		<script type="text/javascript" charset="utf-8" src='__STATIC__/User/js/jquery.min.js'>

		</script>

		<script type="text/javascript" charset="utf-8">
    		$('.nav').click(function(){
    		    $('.nav').removeClass('active')
    		    $(this).addClass('active')
    		    let id = $(this).data('id')
    		    $('.hidebox').hide()
    		    $('#'+id).css('display','flex')
    		})
			$('.el-select').click(function() {
				$('.el-select-dropdown').hide()
				$(this).find('.el-select-dropdown').toggle()
			})
			$('.outcancle').click(function() {
				$('.outbox').hide()
			})
			$('#infosure').click(function() {
				$('.outbox').hide()
			})
			$("#msg_btn").click(function() {
				$('.outbox').show()
			})
		</script>
		<script type="text/javascript">
			// var DEVSERVER = '';
			// var LANGUAGE = 'zh';
			$("#btn").click(function(e) {
				e.preventDefault()
				// $("#login").hide()
				// $("#submittingButton").show()
				$.ajax({
					type: "post",
					dataType: "json",
					data: $("form").serialize(),
					url: "{:url('invoice/kpindex')}",
					success: function(data) {
						if (data.status == 1) {
							layer.msg(data.message, {
								time: 1500
							}, function() {
								window.location.href = data.url
							})
						} else {
							layer.msg(data.message, {
								time: 1500
							}, function() {
								$("#login").show()
								// $("#submittingButton").hide()
							})
						}
					}
				})
			})
			$("#btn_copy").click(function(e) {
				e.preventDefault()
				// $("#login").hide()
				// $("#submittingButton").show()
				$.ajax({
					type: "post",
					dataType: "json",
					data: $("form").serialize(),
					url: "{:url('invoice/kpindex')}",
					success: function(data) {
						if (data.status == 1) {
							layer.msg(data.message, {
								time: 1500
							}, function() {
								// window.location.href = data.url
							})
						} else {
							layer.msg(data.message, {
								time: 1500
							}, function() {
								$("#login").show()
								// $("#submittingButton").hide()
							})
						}
					}
				})
			})
			$(function() {
				$("#content_num").blur(function() {
					var num = isNaN($("#content_num").val()) ? 0 : parseInt($("#content_num").val());
					var price = Number($("#content_price").val());
					var content_rate = $("#content_rate").val();

					// console.log(num);

					var money = parseFloat(num) * parseFloat(price);

					$("#content_money").attr('value', money);
					var rate = parseFloat(content_rate) * parseFloat(money);

					var all = parseFloat(money) + parseFloat(rate);
					$("#content_tax").attr('value', rate);
					$("#hj_money").text(money);
					$("#hj_tax").text(parseInt(rate));
					$("#hj_all").text(parseInt(all));
				});

				$("#content_price").blur(function() {
					var num = isNaN($("#content_num").val()) ? 0 : parseInt($("#content_num").val());

					var price = Number($("#content_price").val());
					var content_rate = $("#content_rate").val();
					// console.log(price);

					var money = parseFloat(num) * parseFloat(price);
					$("#content_money").attr('value', money);
					var rate = parseFloat(content_rate) * parseFloat(money);

					var all = parseFloat(money) + parseFloat(rate);
					$("#content_tax").attr('value', rate);
					$("#hj_money").text(money);
					$("#hj_tax").text(parseInt(rate));
					$("#hj_all").text(parseInt(all));
				});
			});
		</script>
	</body>
</html>